<template>
	<div class="mui-slider">
		<div class="mui-slider-group mui-slider-loop">
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a :href="result1.url"><img :src="result1.img" /></a>
			</div>
			<div class="mui-slider-item">
				<a :href="result.url"><img :src='result.img' /></a>
			</div>
			<div class="mui-slider-item">
				<a :href="result1.url"><img :src='result1.img' /></a>
			</div>
			<div class="mui-slider-item">
				<a :href="result2.url"><img :src="result2.img"/></a>
			</div>
			<div class="mui-slider-item">
				<a :href="result3.url"><img :src="result3.img"/></a>
			</div>
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a :href="result.url"><img :src="result.img" /></a>
			</div>
		</div>
	</div>
</template>
//轮播图使用的mui框架，首先要引入mui.min.css和mui.min.js，轮播图模板引入，配置相关属性即可，可参考官方文档，百度搜索MUI
<script>
//	import VueAwesomeSwiper from 'vue-awesome-swiper'
export default {
	data() {
			return {
				result:{},
				result1:{},
				result2:{},
				result3:{}
			}
		},

		mounted() {
			this.bannerInfo();
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval:1000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
		},
//			components: {
//
//			},
		methods: {
			//轮播图初始化
			bannerInfo() {
				//通过接口获取图片数据
				this.axios.get('../static/data/first.json').then(data => {
//						console.log(data);
					this.result = data.data.floors[0].list[0];
					this.result1 = data.data.floors[0].list[1];
					this.result2 = data.data.floors[0].list[2];
					this.result3 = data.data.floors[0].list[3];
				});
			}
		}
	}
</script>

<style lang="css">

</style>
